<template>
    <div class="content_top" >
      <form class="condition_query">
        <span class="txt">设备来源</span>
        <el-select class="inline-input" size="medium" v-model="deviceSourceId" clearable placeholder="请选择">
          <el-option
            v-for="item in deviceSourceList"
            :key="item.value"
            :label="item.label"
            :value="item.label">
          </el-option>
        </el-select>

        <span class="txt">报审表编号</span>
        <el-input v-model="deviceCnName" size="medium" clearable class="inline-input" placeholder="请输入"></el-input>

        <span class="txt">进场时间</span>
        <el-date-picker
          v-model="time"
          style="width: 270px"
          size="medium"
          type="daterange"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeTime"
        ></el-date-picker>
        <el-button type="primary" size="medium" icon="el-icon-search" style="margin-left:40px" @click="queryListData">查询</el-button>
      </form>

    <!--  表格  -->
      <div>
        <el-table
          :data="tableData"
          size="small"
          v-loading="loading"
          :height="tableHeight"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column type="index" :index="indexMethod" width="36"></el-table-column>
          <el-table-column  label="进场编号">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="deviceDetails(scope.row.id)">{{ scope.row.mobilizationSerialNumber }}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="bidSection" label="标段"></el-table-column>
          <el-table-column prop="deviceCnName" label="设备名称"></el-table-column>
          <el-table-column prop="deviceType" label="设备类型"></el-table-column>
          <el-table-column prop="model" label="规格型号"></el-table-column>
          <el-table-column prop="examinationNumber" label="报审表编号"></el-table-column>
          <el-table-column prop="deviceSource" label="设备来源"></el-table-column>
          <el-table-column label="设备验收">
            <template slot-scope="scope">
              <span>{{ scope.row.entryStatus == 1 ? "已进场" : "已退场" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="mobilizationTime" label="进场时间">
              <template slot-scope="scope" >
                    {{scope.row.mobilizationTime | changeDate}}
              </template>
          </el-table-column>
          <el-table-column prop="outdate" label="退场时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
<!--              <el-button type="text" size="small" @click="toDeviceDetail(scope.row.id)" >设备身份证</el-button>-->
              <el-button type="text" size="small" @click="showRecordTest(scope.row.id)" >检定记录</el-button>
              <el-button type="text" size="small" @click="showRecordModel(scope.row.id)" >维保记录</el-button>
            </template>
          </el-table-column>
        </el-table>

        <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
      </div>

      <!-- 维保记录 -->
      <ServiceRecordModel ref="ServiceRecordRef"></ServiceRecordModel>

      <!--  检定记录    -->
      <TestRecordModal ref="TestRecordRef" ></TestRecordModal>
    </div>
</template>

<script>
  import Pagination from "../Pagination";
  import ServiceRecordModel from "../../models/ServiceRecordModel"
  import TestRecordModal from "../../models/TestRecordModal"
  import HttpInterface from "../../../util/httpInterface"
    export default {
        name: "DeviceStandingBook",
        components:{
          Pagination,ServiceRecordModel,TestRecordModal
        },
        data(){
          return{
            deviceSourceId:'',
            deviceSourceList:[
              { value: '1', label: '自有' },
              { value: '2', label: '租凭' },
            ],
            deviceCheck:'',
            deviceCheckList:[
              { value: '1', label: '已进场' },
              { value: '2', label: '已退场' },
            ],
            deviceCnName:'',
            time:[],
            start:"",
            end:"",
            tableData:[],
            tableHeight: 0,
            loading: false,
            pageData: {
              total: 0,
              pageNum: 1,
              pageSize: 20
            },
            dId:''
          }
        },

      created(){
        this.getTableHeight()
      },

      mounted() {
        let _this = this;
        var resizeFlag = null;
        window.onresize = () => {
          if (resizeFlag) {
            clearTimeout(resizeFlag);
          }
          resizeFlag = setTimeout(() => {
            _this.getTableHeight();
            resizeFlag = null;
          }, 120);
        };
      },

      destroyed() {
        window.onresize = null;
      },

      methods:{
        changeTime(val) {
          if (val != null) {
            this.start = val[0] + " 00:00:00";
            this.end = val[1] + " 23:59:59";
          } else {
            this.start = ""
            this.end = ""
          }
        },

        tableRowClassName({row}) {
          if (row.entryStatus != 1) {
            return 'warning-row';
          }
          return '';
        },

        queryListData() {
          this.loading = true;
          var _this = this
          var searchMap = {
            page: _this.pageData.pageNum,
            size: _this.pageData.pageSize,
            deviceSource: _this.deviceSourceId,
            examinationNumber: _this.deviceCnName,
            startTime: _this.start,
            endTime: _this.end
          }
          HttpInterface.requestPost(this, HttpInterface.URL_DEVICE_FIND_PAGE, searchMap, function (res) {
            var data = res.data;
            if (data.success) {
              let rows = data.other.rows;
              let timestamp = new Date().getTime();
              rows.forEach(item => {
                item.mobilizationSerialNumber = item.bidSection ?
                                                `${item.bidSection}-${Math.floor(Math.random() * (timestamp / 1000))}` :
                                                Math.floor(Math.random() * (timestamp / 1000));
                item.guaStatus = item.guaranteeStatus == 0 ? "关闭" : "打开";
                if (item.mobilizationTime) {
                  item.mobilization_time = item.mobilizationTime.slice(0, 10);
                }
                if (item.endTime && item.startTime) {
                  item.starttime = item.startTime.slice(0, 10);
                  item.endtime = item.endTime.slice(0, 10);
                  item.timeSlot = item.starttime.replace(/-/g, ".") + " - " + item.endtime.replace(/-/g, ".");
                }
              })
              rows.sort(function (a, b) {
                return b.entryStatus - a.entryStatus;
              })
              _this.loading = false;
              _this.tableData = rows;
              _this.pageData.total = data.other.total;
            } else {
              _this.loading = false;
              _this.errorMessage('加载失败！');
            }
          }, function () {
            setTimeout(() => {
              _this.loading = false;
              _this.errorMessage('加载失败！');
            }, 5000)
          }, false)
        },

        //  设备身份证详情
        toDeviceDetail(detailId) {
          this.dId = detailId
          let toNewPage = this.$router.resolve({
            path: `/DeviceDetailInfo/${this.dId}`,
          });
          window.open(toNewPage.href, "_blank")
        },

        // 设备详情
        deviceDetails(id) {
          let _this = this;
          this.$nextTick(() => {
            _this.$emit('toDetails', id);
          })
        },

        getTableHeight() {
          let tableH = 220;
          let tableHeightDetil = window.innerHeight - tableH;
          if (tableHeightDetil <= 300) {
            this.tableHeight = 300;
          } else {
            this.tableHeight = window.innerHeight - tableH;
          }
        },

        // 维保记录
        showRecordModel (matainId) {
          this.$refs.ServiceRecordRef.show(matainId);
        },

        // 检定记录
        showRecordTest(checkId){
          this.$refs.TestRecordRef.modalShow(checkId)
        },

        pageNumData (page) {
          this.pageData.pageNum = Number(page);
          this.queryListData();
        },

        pageSizeData (page) {
          this.pageData.pageSize = Number(page);
          this.queryListData();
        },
        indexMethod (index) {
          return index + 1;
        },
      }
    }
</script>

<style scoped lang="scss" >
  .content_top{
    padding: 0 20px;

    .condition_query{
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .txt{
        margin-right: 10px;
        font-size: 14px;
      }
    }

    .inline-input{
      width: 150px;
      margin-right: 22px;
    }
  }

  .el-table >>> .warning-row {
    background: #fdf5e6;
  }
</style>
